<template>
    <div class="section_common">
        <!-- 定义一个公共返回头 -->
        <div class="common_header">
            <i class="el-icon-back" @click="onClickLeft"></i>
            <span>{{ $route.meta.title }}</span>
        </div>
        <div class="lesson_detail">
            <div class="lesson_detail_header">
                <div class="header_bar">
                    <!--<div>
                      <span><b>1</b>阶段</span>
                      <span>分几阶段</span>
                    </div>
                    <div>
                      <span><b>3</b>门</span>
                      <span>包含课程</span>
                    </div>
                    <div>
                      <span><b>1</b>小时</span>
                      <span>课程总时长</span>
                    </div>
                    <div>
                      <span><b>18</b>人次</span>
                      <span>已学人数</span>
                    </div>-->
                    <div>
                        <span><b> {{stageCount}}</b>阶段</span>
                        <span>包含阶段</span>
                    </div>
                    <div>
                        <span><b>{{courseCount}}</b>门</span>
                        <span>包含课程</span>
                    </div>
                    <div>
                        <span><b>{{studyCount}}</b>人次</span>
                        <span>已学人数</span>
                    </div>
                </div>
            </div>
            <div class="search_area">
                <div class="search_div">
                    <div class="search_input">
                        <van-search
                                v-model="course_title"
                                placeholder="请输入标题（课程名）"
                                @search="searchHandle"
                                @keyup.enter="searchHandle"
                        >
                            <template #action>
                                <div @click="searchHandle">搜索</div>
                            </template>
                        </van-search>
                    </div>
                </div>
                <div class="search_div">
                    <div class="search_input">
                        <van-search
                                v-model="course_ware_name"
                                placeholder="请输入课件名/描述"
                                @search="searchHandle"
                                @keyup.enter="searchHandle"
                        >
                            <template #action>
                                <div @click="searchHandle">搜索</div>
                            </template>
                        </van-search>
                    </div>
                </div>

            </div>

            <div class="layui-collapse" lay-accordion v-if="type == 1">
                <div class="level_lesson" v-for="(levelItem,index) in this.level_lesson" :key="index">
                    <div class="level">
                        <span>{{levelItem}}</span>
                        <span style="cursor: pointer"  class="show_hidden_btn" @click="show_hidden_btn(index)">展开/折叠</span>
                    </div>
                    <div class="lesson_unit" v-for="(lessonItem,lesson_index) in lessonList" :key="lesson_index"
                         v-show="show_stage_index == index">
                        <div v-if="lessonItem.stage==levelItem && lessonItem.lessonWareList!=null && lessonItem.lessonWareList.length!=0">
                            <h4><span>{{lessonItem.title}}</span>
                                <span>
                                    <i style="cursor: pointer"  v-if="lessonItem.questionCount!=null && lessonItem.questionCount!=0" @click="getQuestionList(lessonItem)">
                                        <img width="20px" src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/10/23/1634976928784.png" alt="" />
                                    </i>
                                    <i style="cursor: pointer"  v-else>
                                        <img width="20px" src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/10/23/1634976932505.png" alt="" />
                                    </i>
                                    <!--<el-button plain  size="small" v-if="lessonItem.questionCount!=null && lessonItem.questionCount!=0"
                                                     @click="getQuestionList(lessonItem)">
                                    </el-button>-->
                                    {{lessonItem.lessonWareList.length}} 门课&nbsp;&nbsp;
                                    &nbsp;<span style="cursor: pointer"  @click="show_hidden_course_ware_btn(lesson_index)">展开/折叠</span>
                                </span>

                            </h4><!-- · {{lessonItem.lessonWareList.length}} 门课-->
                            <van-steps direction="vertical">
                                <div>
                                    <div v-for="(lessonWareItem,lessonWareIndex) in lessonItem.lessonWareList"
                                              :key="lessonWareIndex" v-show="show_course_ware_index == lesson_index">
                                        <div class="unit_main"
                                             @click="goLessonWareDetail(lessonItem,lessonWareItem.id,lessonItem.lessonWareList[0],lessonWareIndex)">
                                            <i class="el-icon-success icon_class" style="color: #5daf34" v-if="lessonWareItem.pdfStatus == 1"></i>
                                            <van-icon name="circle" size="12"  v-else/>
                                            <div class="unit_detail">
                                                <div class="face_img">
                                                    <img
                                                            src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/04/14/1618395502450.png"
                                                            alt=""
                                                    />
                                                </div>
                                                <div class="left">
                                                    <span class="title" :style="lessonWareItem.pdfStatus == 1&&'color:green'">{{lessonWareItem.courseWareName}}</span>
                                                    <span class="description">{{lessonWareItem.description}}</span>
                                                    <!--                          <span class="time">约20分钟</span>-->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </van-steps>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-collapse" lay-accordion v-if="type == 2">
                <div class="level_lesson">
                    <div class="lesson_unit" v-for="(lessonItem,lesson_index) in lessonList" :key="lesson_index">
                        <div v-if="lessonItem.lessonWareList!=null && lessonItem.lessonWareList.length!=0">
                            <h4><span>{{lessonItem.title}}</span>
                                <span style="cursor: pointer" @click="show_hidden_course_ware_btn(lesson_index)">
                                    <i style="cursor: pointer"  v-if="lessonItem.questionCount!=null && lessonItem.questionCount!=0" @click="getQuestionList(lessonItem)">
                                        <img width="20px" src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/10/23/1634976928784.png" alt="" />
                                    </i>
                                    <i style="cursor: pointer"  v-else>
                                        <img width="20px" src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/10/23/1634976932505.png" alt="" />
                                    </i>
                                    {{lessonItem.lessonWareList.length}} 门课
                                 <!--<el-button type="primary" icon="el-icon-edit" size="mini" circle v-if="lessonItem.questionCount!=null && lessonItem.questionCount!=0"-->
                                 <!--                 @click="getQuestionList(lessonItem.id)"></el-button>-->
                                    &nbsp;展开/折叠</span>
                            </h4><!-- · {{lessonItem.lessonWareList.length}} 门课-->
                            <van-steps direction="vertical" :active="lessonItem.lessonWareList[0]==null?0:lessonItem.lessonWareList[0].hadFinishCount">
                                <div v-if="lessonItem.lessonWareList[0].content.indexOf('<img') == -1">
                                    <van-step v-for="(lessonWareItem,lessonWareIndex) in lessonItem.lessonWareList"
                                              :key="lessonWareIndex" v-show="show_course_ware_index == lesson_index">
                                        <div class="unit_main"
                                             @click="goLessonWareDetail(lessonItem,lessonWareItem.id,lessonItem.lessonWareList[0],lessonWareIndex)">
                                            <div class="unit_detail">
                                                <div class="face_img">
                                                    <img
                                                            src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/04/14/1618395502450.png"
                                                            alt=""
                                                    />
                                                </div>
                                                <div class="left">
                                                    <span class="title">{{lessonWareItem.courseWareName}}</span>
                                                    <span class="description">{{lessonWareItem.description}}</span>
                                                    <!--                          <span class="time">约20分钟</span>-->
                                                </div>

                                            </div>
                                        </div>
                                    </van-step>
                                </div>
                                <div v-else>
                                    <div v-for="(lessonWareItem,lessonWareIndex) in lessonItem.lessonWareList"
                                         :key="lessonWareIndex" v-show="show_course_ware_index == lesson_index">
                                        <div class="unit_main"
                                             @click="goLessonWareDetail(lessonItem,lessonWareItem.id,lessonItem.lessonWareList[0],lessonWareIndex)">
                                            <i class="el-icon-success icon_class" style="color: #5daf34" v-if="lessonWareItem.pdfStatus == 1"></i>
                                            <van-icon name="circle" size="12"  v-else/>
                                            <div class="unit_detail">
                                                <div class="face_img">
                                                    <img
                                                            src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/04/14/1618395502450.png"
                                                            alt=""
                                                    />
                                                </div>
                                                <div class="left">
                                                    <span class="title" :style="lessonWareItem.pdfStatus == 1&&'color:green'">{{lessonWareItem.courseWareName}}</span>
                                                    <span class="description">{{lessonWareItem.description}}</span>
                                                    <!--                          <span class="time">约20分钟</span>-->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </van-steps>
                        </div>
                    </div>
                </div>
            </div>


            <div class="main">
                <div class="item" v-for="(item,index) in this.courseDeptList" :key="index">
                    <div class="left">
                        <div class="title">{{ item.deptName }}</div>
                        <!--                        <div v-if="item.stageSum != null ">共 {{item.stageSum}} 阶段</div>-->
                        <!--                        <div class="info">共{{ item.courseCount }}门课程</div>-->
                        <div class="van-ellipsis">
                            <a :title="item.description">{{item.description}}</a>
                        </div>

                    </div>
                    <div class="right">
                        <div class="controller" @click="goCourseList(item.deptId)">
                            <span>查看详情</span>
                        </div>
                        <!--                        <img-->
                        <!--                                src="http://oa.yswg.com.cn:80/group1/M00/00/15/rBJDQV_1dgWANWyYAAASSRLIgQM492.png"-->
                        <!--                                alt=""-->
                        <!--                        />-->
                    </div>
                </div>
            </div>
            <!--问答-->
            <el-dialog
                    title="课后题"
                    :visible.sync="question.questionVisible"
                    width="40%"
                    :before-close="handleClose">
                <CourseQuestion :questionList="question.questionList"
                                :finishedExamStatus="question.finish_status"
                                @handleClose="handleClose"></CourseQuestion>
            </el-dialog>

            <!--            <div v-if="type == 2">
                            <div class="lesson_unit" v-for="lessonItem in lessonList" :key="lessonItem.id">
                                <h4>{{lessonItem.title}} · {{lessonItem.lessonWareList.length}} 门课</h4>
                                <van-steps direction="vertical">
                                    <div  v-for="(item,index) in lessonItem.lessonWareList" :key="index">
                                        <div class="unit_main"  @click="goLessonWareDetail(lessonItem,item.id,lessonItem.lessonWareList[0],index)">
                                            <div class="unit_header">
                                                <div class="left">
                                                    <span class="title">{{item.courseWareName}}</span>
                                                    &lt;!&ndash;                          <span class="time">约20分钟</span>&ndash;&gt;
                                                </div>
                                                &lt;!&ndash;                          <div class="right">1 门课程</div>&ndash;&gt;
                                            </div>
                                            <div class="unit_detail">
                                                <div class="face_img">
                                                    <img
                                                            src="../../../assets/icon/培训管理/学习路径.png"
                                                            alt=""
                                                    />
                                                </div>
                                                <div class="title">{{item.description}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </van-steps>
                            </div>
                        </div>
                        <div v-if="type == 1">
                            <div class="lesson_unit">
                                <div class="lesson_item" v-for="lessonItem in lessonList" :key="lessonItem.id">
                                    <div class="lesson_main_title">{{lessonItem.title}}</div>
                                    <van-steps direction="vertical"
                                               :active="lessonItem.lessonWareList[0]==null?0:lessonItem.lessonWareList[0].hadFinishCount">
                                        &lt;!&ndash;                           <van-step v-for="(item,index) in lessonItem.lessonWareList" :key="index">&ndash;&gt;
                                        <div v-for="(item,index) in lessonItem.lessonWareList" :key="index">
                                            <div class="unit_main"
                                                 @click="goLessonWareDetail(lessonItem,item.id,lessonItem.lessonWareList[0],index)">
                                                <div class="unit_header">
                                                    <div class="left">
                                                        <span class="title">{{item.courseWareName}}</span>
                                                    </div>
                                                    &lt;!&ndash; <div class="right">{{lessonItem.lessonWareCount}} 门课</div>&ndash;&gt;
                                                </div>
                                                <div class="unit_detail">
                                                     <div class="face_img">
                                                         <img src="../../../assets/icon/培训管理/学习路径.png"
                                                              alt=""/>
                                                     </div>
                                                    <div class="title">
                                                        {{item.description}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </van-steps>
                                </div>

                            </div>
                        </div>
                        <div v-if="type == 2">
                            <div class="lesson_unit">
                                <div class="lesson_item" v-for="lessonItem in lessonList" :key="lessonItem.id">
                                    <div class="lesson_main_title">{{lessonItem.title}}</div>
                                    <div v-for="(item,index) in lessonItem.lessonWareList" :key="index">
                                        <div class="unit_main"
                                             @click="goLessonWareDetail(lessonItem,item.id,lessonItem.lessonWareList[0],index)">
                                            <div class="unit_header">
                                                <div class="left">
                                                    <span class="title">{{item.courseWareName}}</span>
                                                </div>
                                                &lt;!&ndash; <div class="right">{{lessonItem.lessonWareCount}} 门课</div>&ndash;&gt;
                                            </div>
                                            <div class="unit_detail">
                                                   <div class="face_img">
                                                       <img src="http://oa.yswg.com.cn:80/group1/M00/00/15/rBJDQV_1dVqAPMh6AARoLP91sOc071.jpg"
                                                            alt=""/>
                                                   </div>
                                                <div class="title">
                                                    {{item.description}}
                                                    <p v-if="item.studyStatus == 1" style="color: #07c160">已完成</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>-->
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Toast,Icon} from "vant";
    import CourseQuestion from '@/components/CourseQuestion.vue';
    Vue.use(Icon);
    export default {
        components: {
            // pdf,
            CourseQuestion,
        },
        data() {
            return {
                question: {
                    questionList: [],
                    questionVisible: false,
                    finish_status:0,
                },
                //submitCheckBtnVisible: false,
                show_course_ware_index: 0,
                show_stage_index: 0,
                getLessonListUrl: "/mobiles/getCourseList", //获取课程接口
                getCourseQuestionListUrl: '/mobilesPost/getCourseQuestionList', //课程问题列表
                lessonList: [],
                lessonWareList: [], //课件列表
                courseDeptList: [], //部门列表
                getLessonWareListUrl: "/mobiles/getCourseWareList", //获取课件接口
                deptId: this.$route.params.id.localeCompare('undefined') !== 0 && (this.$route.params.id != null || this.$route.params.id != '') ? this.$route.params.id : '',
                courseCount: 0,
                level_lesson: ["初级", "中级", "高级"],
                studyCount: 0,
                stageCount: 0,
                tempData: [],
                type: this.$route.params.type,
                avatar: '',
                course_title: '',
                course_ware_name: '',
                deptSearch: '',
                // active:"-1",//步骤索引,从0开始
            };
        },

        created() {
            this.getLessonList();
            // console.log(this.$route.params.type) //2
        },
        watch: {
            $route() {
                this.deptId = this.$route.params.id;
                this.type = this.$route.params.type;
                this.course_title = "";
                this.course_ware_name = "";
            },
            deptId() {
                this.getLessonList();
            }
        },
        methods: {
            //关闭
            handleClose() {
                this.$confirm('确认关闭？')
                    .then(() => {
                        this.question.questionVisible = false;
                    })
                    .catch(() => {
                    });
            },
            listParentClose() {
                this.question.questionVisible = false;
            },
            //问答列表
            getQuestionList(item) {
                // console.log(item)
                var that = this;
                // that.question.finish_status = item.finish_status;

                this.$https.post(that.getCourseQuestionListUrl, {
                    user_id: JSON.parse(localStorage.getItem("userInfo")).userId,
                    associatedId: item.id,
                    pageType : 1
                })
                    .then(res => {
                        // console.log(res.data.data);
                        that.question.questionVisible = true

                        that.question.questionList = res.data.data;
                        that.question.finish_status = res.data.data[0].finishStatus;
                    })
            },
            //课程显示课件按钮
            show_hidden_course_ware_btn(index) {
                if (this.show_course_ware_index == index) {
                    this.show_course_ware_index = -1;
                    return
                }
                this.show_course_ware_index = index;
            },
            //阶段显示关闭按钮
            show_hidden_btn(index) {
                console.log(this.show_stage_index + '.' + index)
                if (this.show_stage_index == index) {
                    this.show_stage_index = -1;
                    return
                }
                this.show_stage_index = index;
            },
            searchHandle() {
                this.getLessonList();
            },
            /* // 去课程详情页
             goLessonDetail() {
               this.$router.push(`/lesson/detail/${value}`);
             },*/
            //获取课程 根据部门
            getLessonList() {
                var that = this;
                this.$https
                    .post(this.getLessonListUrl, {
                        userId: JSON.parse(localStorage.getItem("userInfo")).userId, //根据用户ID 选出岗位ID，再推送课程
                        deptId: that.deptId,
                        type: that.type,
                        title: that.course_title,
                        course_ware_name: that.course_ware_name,
                    })
                    .then(res => {
                        // console.log(res.data.data)
                        that.lessonList = res.data.data.courseList;
                        that.courseCount = that.lessonList.length;
                        that.studyCount = res.data.data.studyCount;
                        that.stageCount = res.data.data.stageCount;
                        that.courseDeptList = res.data.data.childDepts;
                        if (that.lessonList.length == 0) {
                            Toast("暂无课程");
                        }

                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            onClickLeft() {
                Toast("返回");
                this.$router.go(-1);
            },
            onClickRight() {
                Toast("按钮");
            },
            //观赏课件
            goLessonWareDetail(lesson, lessonWareId, axtive, clickIndex) {
                // console.log(lesson.lessonWareList)
                localStorage.removeItem('lessonWareList');
                localStorage.setItem("lessonWareList", JSON.stringify(lesson.lessonWareList));
                var toUrl = `/train/study/detail/${lesson.id}/${lessonWareId}/${clickIndex}`;
                localStorage.setItem("trainerAvatar", lesson.avatar);
                if (this.type == 1) {
                    this.$router.push(toUrl);
                    return;
                }

                if (this.type == 1) {
                    axtive == null ? 0 >= clickIndex ? this.$router.push(toUrl)
                        : Toast('请先完成先序课件')
                        : axtive.hadFinishCount >= clickIndex ? this.$router.push(toUrl) :
                        Toast('请先完成先序课件');
                    return;
                }
                if (this.type == 2){
                    if (axtive == null){
                        if (0 >= clickIndex){
                            this.$router.push(toUrl)
                        }else {
                            Toast('请先完成先序视频')
                        }
                    }else {
                        this.active = axtive.hadFinishCount;//视频的完成数
                        if (axtive.content.indexOf('<img') === -1){
                            if (axtive.hadFinishCount >= clickIndex){
                                this.$router.push(toUrl)
                            }else {
                                Toast('请先完成先序视频')
                            }
                        }else {
                            this.$router.push(toUrl);
                        }
                    }
                    return;
                }
                if (this.type == 2) {
                    this.$router.push(toUrl);
                    return;
                }
            },
            goCourseList(deptId) {
                // this.deptId = deptId;
                // this.getLessonList();
                this.$router.push(`/train/study/list/${deptId}/${this.type}`);
            },
        },

    };
</script>

<style lang="scss" scoped>
    .section_common{
        display: flex;
        flex-flow: column nowrap;
        .common_header{
            width: 100%;
        }
    }
    .search_area {
        width: 100%;
        margin: 40px auto 20px auto;
        height: 50px;

        .search_div {
            width: 50%;
            float: left;

            .search_input {
                width: 80%;
                margin: 10px auto;


            }
        }


    }

    .lesson_detail_header {
        width: 100%;
        height: 40px;
        background-color: #a365b3;
        position: relative;

        .header_bar {
            width: 90%;
            height: 50px;
            position: absolute;
            top: 15px;
            left: 5%;
            background-color: white;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;

            & > div {
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;

                b {
                    font-size: 18px;
                }
            }
        }
    }

    .level_lesson {
        width: 100%;
        background-color: white;
        border-radius: 5px;
        margin-bottom: 10px;

        .level {
            margin-left: 20px;
            font-size: 18px;
            position: relative;
            padding-right: 20px;

            &::after {
                content: '';
                width: 2px;
                height: 15px;
                position: absolute;
                left: -10px;
                bottom: 4px;
                background-color: #fea84f;
            }

            .show_hidden_btn {
                font-size: 14px;
                cursor: pointer;
                float: right;
            }
        }

    }

    .lesson_unit {

        text-align: left;

        h4 {
            background-color: #eee;
            margin: 5px 10px;
            padding: 5px 15px;
            color: #666;
            font-weight: 400;
            font-size: 14px;
            border-radius: 20px;
            display: flex;
            justify-content: space-between;
        }

        .van-step__icon--active, .van-step__title--active {
            color: #666;
        }

        .right {
            float: right;
        }

        .van-step--vertical {
            .van-step__circle-container {
                top: 15px !important;
            }
        }

        .unit_main {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            .icon_class{
                /*position: ;*/
            }

            .unit_header {
                width: 100%;
                box-sizing: border-box;
                height: 30px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;

                .left {
                    & > .title {
                        margin-right: 10px;
                        font-size: 14px;
                        font-weight: 600;

                    }
                    .title-green{
                        color:rgb(93, 175, 52);
                    }

                }
            }

            .unit_detail {
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                padding-bottom: 20px;
                padding-left: 10px;
                box-sizing: border-box;

                .face_img {
                    width: 75px;
                    height: 75px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .left {
                    flex: 1;

                    & > .title {
                        cursor: pointer;
                        margin-right: 10px;
                        font-size: 14px;
                        font-weight: 600;
                    }

                    & > .description {
                        margin-right: 10px;
                        font-size: 14px;
                        margin-left: 10px;
                    }
                }

                .title {
                    display: block;
                    font-size: 14px;
                    margin-left: 10px;
                }
            }
        }
    }

    .top_img {
        width: 100%;

        img {
            width: 100%;
        }
    }

    .main {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-flow: column nowrap;

        .item {
            width: 100%;
            height: 100px;
            background-color: white;
            border-radius: 6px;
            padding: 5px 20px;
            font-size: 12px;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            border: 1px solid rgba(0, 0, 0, 0.1);
            margin-bottom: 5px;

            .left {
                flex: 1;
                line-height: 40px;
                overflow: hidden;

                & > div {
                    margin-bottom: 4px;
                }

                .title {
                    font-size: 16px;
                    font-weight: 600;
                }

                .controller {
                    span {
                        padding: 4px 10px;
                        background-color: #fea84f;
                        color: white;
                        border-radius: 10px;
                        cursor: pointer;
                    }
                }
            }

            .right {
                width: 100px;

                .controller {
                    span {
                        padding: 4px 10px;
                        background-color: #fea84f;
                        color: white;
                        border-radius: 10px;
                        cursor: pointer;
                    }
                }

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    width: 100%;
                }
            }
        }
    }
</style>
